<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <link rel="stylesheet" href="../../../swipebox.css">
    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .popClass {
            height: 400px;
        }

        tr td:first-child {
            width: 100px;
        }
    </style>
</head>
<body style="background: #01253f">
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main">
        <el-row>
            <el-col :span="12">
                <p style="font-weight: 900;color: #00c5cc;"><strong>| 风险点统计 </strong>   <el-button type="text" icon="el-icon-share" @click="exportData">导出</el-button></p>
              <div id="myChart" style="height: 600px;width: 100%"></div>
            </el-col>
            <el-col :span="12">
                <table width="100%" border="1" cellspacing="0" cellpadding="10" style="font-size: 14px;color:white;font-weight: 900" bordercolor="#0081ff">
                    <tr align="center" style="background: darkblue">
                        <th>行政区域</th>
                        <th>重大风险点</th>
                        <th>较大风险点</th>
                        <th>一般风险点</th>
                        <th>低风险点</th>
                    </tr>
                    <tr align="center" v-for="(item,index) in tableData" :key="index">
                        <td>{{item.zone}}</td>
                        <td>{{item.one}}</td>
                        <td>{{item.two}}</td>
                        <td>{{item.three}}</td>
                        <td>{{item.four}}</td>
                    </tr>
                </table>
            </el-col>
        </el-row>
        <el-row>
        </el-row>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery.swipebox.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            tableData:[]
        },
        created: function () {
            $('.page').show();
            this.loadData();

        },
        methods: {
            cancelDetail() {
                this.detailFormVisible = false;
                this.DetailData = {};
            },
            loadData: function () {
                let param = {};
                param.UserId = SiteConfig.account.id;
                param.pageno =1;
                param.pagesize = 30;
                HttpUtil.get('GovStatistics/getGovCheckRiskByZone', param).success((res) => {
                    this.tableData = res.data;
                    this.drawChart();
                });
            },
            exportData() {
                HttpUtil.get('GovStatistics/ExportGovCheckRiskByZone').success((res) => {
                    this.$message.success('导出成功');
                    window.location = SiteConfig.webApiset + res.data;
                })
            },
            drawChart(){
                let chartData = {
                    ydatas:[],
                    ones:[],
                    twos:[],
                    threes:[],
                    fours:[],
                }
                for (let item of this.tableData){
                    chartData.ydatas.push(item.zone);
                    chartData.ones.push(item.one);
                    chartData.twos.push(item.two);
                    chartData.threes.push(item.three);
                    chartData.fours.push(item.four);
                }
             let  option = {
                 color: ["#d73530", "#E6A23C", "#fbbd08", "#0081ff"],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['重大风险点', '较大风险点', '一般风险点', '低风险点'],
                        textStyle:{
                            color:'#FFFFFF',
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color:'#FFFFFF' //
                            }
                        },
                    },
                    yAxis: {
                        type: 'category',
                        data: chartData.ydatas,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color:'#FFFFFF' //
                            }
                        },
                    },
                    series: [
                        {
                            name: '重大风险点',
                            type: 'bar',
                            stack: '总量',

                            data: chartData.ones
                        },
                        {
                            name: '较大风险点',
                            type: 'bar',
                            stack: '总量',

                            data: chartData.twos
                        },
                        {
                            name: '一般风险点',
                            type: 'bar',
                            stack: '总量',

                            data:chartData.threes
                        },
                        {
                            name: '低风险点',
                            type: 'bar',
                            stack: '总量',

                            data:chartData.fours
                        },
                    ]
                };
                let myChart = echarts.init(document.getElementById('myChart'));
                myChart.setOption(option);

                window.onresize = function () {
                    myChart.resize();//

                }
            }


        },

        mounted: function () {

        }
    });
</script>
</body>
</html>
